//获取所有 input&textarea 输入框的数据
function getAllInput( $parentObj, data ) {

  //先判断前面是否已经有未填信息了
  if ( typeof data === 'string' )
    return false;

  let valText = '';
  //获取所有input 与 textarea 的值
  $( $parentObj ).find( 'input.lop-form-input, textarea.lop-form-input' ).each( function ( i, v ) {
    let name = $( v ).attr( "name" );
    let val = $( v ).val();

    //先判断该标签是否含有的必填的项的 * 号  包含 true，若没有，则先判断 用户是否输入值，若没输入则不添加
    let $title = $( v ).parents( '.lop-form-input-box' ).find( '.lop-form-title' );
    let must = $( $title ).attr( 'lop-must' );
    //判断用户是否写了 must 属性
    if ( must !== undefined ) {

      if ( !val ) {
        //判断用户的 must 属性里是否填了值
        valText = ( must !== '' ? must : $( $title ).find( '.lop-text' ).text().substr( 1 ) + ' 不能为空' );
        return false;
      } else
        data[name] = val;

    } else {
      if ( val )
        data[name] = val;
    }

  } );

  if ( valText )
    return valText;

  return data;
}

//获取所有 单选框&多选框 的数据
function getAllRadio( $parentObj, data ) {

  //先判断前面是否已经有未填信息了
  if ( typeof data === 'string' )
    return false;

  let valText = '';
  //获取所有input 与 textarea 的值
  $( $parentObj ).find( '.lop-form-select-box' ).each( function ( i, v ) {
    let name = $( v ).attr( "name" );

    if ( name === undefined ) {
      lop_show_error( '您的 单&多选框 组件未定义 name 属性' );
      return false;
    }
    let val = '';

    if ( $( v ).find( '.lop-form-radio-list' ).length === 0 )
      val = getCheckVal( $( v ) );
    else
      val = getRadioVal( $( v ) );

    //先判断该标签是否含有的必填的项的 * 号  包含 true，若没有，则先判断 用户是否输入值，若没输入则不添加
    let must = $( v ).children( '.lop-form-title' ).attr( 'lop-must' );
    //判断用户是否写了 must 属性
    if ( must !== undefined ) {

      if ( !val ) {
        //判断用户的 must 属性里是否填了值
        valText = ( must !== '' ? must : $( v ).children( '.lop-form-title' ).find( '.lop-text' ).text().substr( 1 ) + ' 不能为空' );
        return false;
      } else
        data[name] = val;

    } else {
      if ( val )
        data[name] = val;
    }
  } );

  if ( valText )
    return valText;

  return data;
}

//获取所有 单选下拉框 的数据
function getAllSelect( $parentObj, data ) {
  //先判断前面是否已经有未填信息了
  if ( typeof data === 'string' )
    return false;

  let valText = '';
  //获取所有input 与 textarea 的值
  $( $parentObj ).find( '.lop-form-select-list' ).each( function ( i, v ) {
    let name = $( v ).attr( "name" );

    if ( name === undefined ) {
      lop_show_error( '您的 单选下拉框 组件未定义 name 属性' );
      return false;
    }
    let val = parseInt( getSelectOptionVal( v ) );

    //先判断该标签是否含有的必填的项的 * 号  包含 true，若没有，则先判断 用户是否输入值，若没输入则不添加
    let must = $( v ).children( '.lop-form-title' ).attr( 'lop-must' );
    //判断用户是否写了 must 属性
    if ( must !== undefined ) {

      if ( !val || val === -1 ) {
        //判断用户的 must 属性里是否填了值
        valText = ( must !== '' ? must : $( v ).find( '.lop-text' ).text().substr( 1 ) + ' 不能为空' );
        return false;
      } else
        data[name] = val;

    } else {
      if ( val )
        data[name] = val;
    }
  } );

  if ( valText )
    return valText;

  return data;
}

//获取所有 单&多文件上传组件的数据
function getAllFileUp( $parentObj, data ) {
  //先判断前面是否已经有未填信息了
  if ( typeof data === 'string' )
    return false;

  let valText = '';
  //获取所有input 与 textarea 的值
  $( $parentObj ).find( '.lop-form-file' ).each( function ( i, v ) {

    let isMore = $( v ).hasClass( 'lop-more-file' );

    let name = $( v ).attr( "name" );

    //先判断该标签是否含有的必填的项的 * 号  包含 true，若没有，则先判断 用户是否输入值，若没输入则不添加
    let must = $( v ).parents( '.lop-form-title' ).attr( 'lop-must' );
    //判断用户是否写了 must 属性
    if ( must !== undefined ) {

      let flag = false;
      //查找是否有 该 input 上传的文件
      for ( let key of ( isMore ? moreFile : oneFile ).keys() ) {
        if ( ( isMore ? key.substr( 0, key.indexOf( '/' ) ) : key ) === name ) {
          flag = true;
          break;
        }
      }

      if ( !flag ) {
        valText = $( v ).siblings( '.lop-form-text' ).children( '.lop-text' ).text().substr( 1 ) + ' 不能为空';
        return false;
      }
    }
  } );

  if ( valText )
    return valText;

  return data;
}

//获取当前表单的所有数据并返回
function getNowFormData( $obj ) {
  let $parentObj = $( $obj ).parent( '.lop-form-box-loc' );
  let data = {};

  //获取所有 input&textarea 输入框的数据
  let val = getAllInput( $parentObj, data );
  data = ( typeof val === 'boolean' ? data : val );

  //获取所有 单选框 & 多选框 的数据
  val = getAllRadio( $parentObj, data );
  data = ( typeof val === 'boolean' ? data : val );

  //获取所有 单选下拉框 的数据
  val = getAllSelect( $parentObj, data );
  data = ( typeof val === 'boolean' ? data : val );

  //获取所有 单&多文件上传组件的数据
  val = getAllFileUp( $parentObj, data );
  data = ( typeof val === 'boolean' ? data : val );

  return data;
}

//用于提交表单数据的方法
function lop_form_sub( $obj ) {
  let callMethod = $( $obj ).attr( 'lop-callback' );
  let url = $( $obj ).attr( 'lop-url' );
  //获取文件上传路径
  let fileUrl = $( $obj ).attr( 'lop-file-url' );
  fileUrl = ( fileUrl === undefined || fileUrl === '' ? url : fileUrl );
  //获取文件上传的回调函数
  let fileCallback = $( $obj ).attr( 'lop-file-callback' );
  fileCallback = ( fileCallback === undefined || fileCallback === '' ? callMethod : fileCallback );

  //获取当前表单的所有数据  getNowFormData() 该方法接收提交按钮对象作为参数
  let data = getNowFormData( $obj );

  if ( typeof data === 'string' ) {
    lop_show_warn( data );
    return false;
  }

  try {
    callMethod = eval( callMethod );
  } catch ( e ) {
    lop_show_error( callMethod + ' 方法不存在！' );
  }

  //判断如果 callMethod 是一个方法则发送 ajax请求
  if ( typeof callMethod === 'function' ) {
    //上传表单数据
    lop_post( url, data, callMethod );
    //单文件数据上传
    oneFileUpload( fileUrl, fileCallback );
    //多文件数据上传
    moreFileUpload( fileUrl, fileCallback );
  }
}

// 获取 单选框的值
function getRadioVal( obj ) {
  return $( obj ).find( '.lop-form-radio-sel' ).attr( 'lop-val' );
}

// 获取 多选框的值
function getCheckVal( obj ) {
  let val = [];

  $( obj ).find( '.lop-form-check-sel' ).each( function ( i, v ) {
    val.push( parseInt( $( v ).attr( 'lop-val' ) ) );
  } );
  return ( val.length === 0 ? '' : val );
}

//单选框 单击改变样式
function radioClick( obj ) {
  $( obj ).addClass( 'lop-form-radio-sel' ).siblings( '.lop-form-radio-option' ).removeClass( 'lop-form-radio-sel' );
}

//多选框 单击改变样式
function checkClick( obj ) {
  let flag = $( obj ).hasClass( 'lop-form-check-sel' );
  if ( flag )
    $( obj ).removeClass( 'lop-form-check-sel' );
  else
    $( obj ).addClass( 'lop-form-check-sel' );
}

//获取 单选下拉框选项的值
function getSelectOptionVal( obj ) {
  return $( obj ).find( '.lop-sel-option' ).attr( 'lop-val' );
}

//单选 下拉选择框的选择方法
function selectOption( obj ) {
  let content = $( obj ).text();
  let dataVal = $( obj ).attr( 'lop-val' );

  $( obj ).addClass( 'lop-sel-option' ).siblings( '.lop-select-option' ).removeClass( 'lop-sel-option' )
    .parent( '.lop-select' ).siblings( '.lop-sel-text' ).text( content );
}

//单文件上传的提交方法
function oneFileUpload( url, callback ) {
  file_upload( url, oneFile, callback, false );
}

//多文件上传的提交方法
function moreFileUpload( url, callback ) {
  file_upload( url, moreFile, callback, true );
}

function file_upload( url, data, callback, isMore ) {

  let isHaveFile = false;

  //是多文件上传
  if ( isMore ) {
    //多上传文件
    for ( let key of moreFile.keys() ) {
      if ( key !== undefined && key !== '' ) {
        isHaveFile = true;
      }
    }
  } else {
    //单上传文件
    for ( let key of oneFile.keys() ) {
      if ( key !== undefined && key !== '' )
        isHaveFile = true;
    }
  }
  if ( !isHaveFile )
    return false;
  lop_ajax( url, "POST", data, callback, false, false, false );
}

//用来存储用户上传的 单文件 formData
let oneFile = new FormData();
//用来存储用户上传的 多文件 formData
let moreFile = new FormData();

//单文件上传方法
function oneFileUp( $obj, imgIO ) {
  if ( imgIO ) {
    if ( imgIO.size <= 1048576 ) {
      let reader = new FileReader();
      //将文件读取为 DataURL
      reader.readAsDataURL( imgIO );

      /*//将文件读取为二进制码
      reader.readAsBinaryString(imgIO);*/

      let $showImg = $( $obj ).parent( '.lop-form-file-btn' ).next( '.lop-form-file-look' );
      //文件读取完时触发上传
      reader.onload = function ( e ) {

        let fileName = $( $obj ).attr( 'name' );

        $( $showImg ).html( '<div class="lop-form-img-box">\n' +
          '        <img src="' + this.result + '">\n' +
          '        <div onclick="delImgOne(this)" lop-name="' + fileName + '" class="lop-form-img-del"><i class="iconfont icon-lop-del"></i></div>\n' +
          '      </div>' );

        if ( oneFile.has( fileName ) )
          oneFile.set( fileName, imgIO );
        else
          oneFile.append( fileName, imgIO );
        lop_show_ok( '上传成功！' );
      };
    } else
      lop_show_warn( '文件最大上传 1MB.' );
  }
}

//单图片上传 删除图片方法
function delImgOne( obj ) {
  let fileName = $( obj ).attr( 'lop-name' );

  for ( let key of oneFile.keys() ) {
    if ( key === fileName ) {
      oneFile.delete( key );
      $( obj ).parents( '.lop-form-file-look' ).html( '<i class="lop-icon iconfont icon-lop-img"></i>' )
        .siblings( '.lop-form-file-btn' ).children( '.lop-form-file' ).val( '' );
      lop_show_ok( '删除成功...' );
    }
  }
}

//多文件上传方法
function moreFileUp( $obj, imgIO ) {
  let $parent = $( $obj ).parents( '.lop-files' );
  let num = parseInt( $( $parent ).find( '.lop-form-max-num' ).attr( 'lop-num' ) );
  let length = $( $parent ).find( '.lop-form-img-box' ).length;

  if ( length >= num ) {
    lop_show_warn( '您的上传的图片以及到达上限了！' );
    $( $obj ).val( '' );
    return false;
  }

  if ( imgIO ) {
    if ( imgIO.size <= 1048576 ) {
      let fileName = imgIO.name;
      let reader = new FileReader();
      //将文件读取为 DataURL
      reader.readAsDataURL( imgIO );

      let $showImg = $( $obj ).parent( '.lop-form-file-btn' ).siblings( '.lop-form-file-look' );
      //文件读取完时触发上传
      reader.onload = function ( e ) {

        let inputName = $( $obj ).attr( 'name' );

        $( $showImg ).append( '<div class="lop-form-img-box">\n' +
          '        <img src="' + this.result + '">\n' +
          '        <div onclick="delImgMore(this)" lop-name="' + inputName + "/" + length + fileName + '" class="lop-form-img-del"><i class="iconfont icon-lop-del"></i></div>\n' +
          '      </div>' );

        moreFile.append( inputName + "/" + length + fileName, imgIO );
        lop_show_ok( '上传成功！' );
        $( $obj ).val( '' );
      };
    } else
      lop_show_warn( '文件最大上传 1MB.' );
  }
}

//多图片上传 删除图片方法
function delImgMore( obj ) {
  let fileName = $( obj ).attr( 'lop-name' );

  for ( let key of moreFile.keys() ) {
    if ( key === fileName ) {
      moreFile.delete( ( fileName ) );
      $( obj ).parent( '.lop-form-img-box' ).remove();
      lop_show_ok( '删除成功...' );
    }
  }
}

// input 获取焦点方法
function inputFocus( obj ) {
  let parent = $( obj ).parents( '.lop-form-input-box' );
  if ( parent.hasClass( 'lop-form-classic' ) )
    $( obj ).parent( 'div.lop-form-input' ).css( 'box-shadow', 'rgba(100,149,237,.2) 0 0 10px' );
  else
    $( parent ).css( 'box-shadow', 'rgba(100,149,237,.2) 0 0 10px' );
}

// input 失去焦点方法
function inputBlur( obj ) {
  let parent = $( obj ).parents( '.lop-form-input-box' );
  if ( parent.hasClass( 'lop-form-classic' ) )
    $( obj ).parent( 'div.lop-form-input' ).css( 'box-shadow', 'none' );
  else
    $( parent ).css( 'box-shadow', 'none' );
}

$( function () {
  // input&textarea 获取&失去焦点事件
  $( 'input.lop-form-input, textarea.lop-form-input' ).focus( ( e ) => {
    inputFocus( e.target );
  } ).blur( ( e ) => {
    inputBlur( e.target );
  } );

  // 初始化所有必填项表单组件，加上 * 号
  $( '.lop-form-title[lop-must]' ).find( '.lop-text' ).prepend( '<span class="lop-form-must">*</span>' );

  // 单选框 判断所有单选框是否都只有一个默认选中的值
  $( '.lop-form-radio-list' ).each( function ( i, v ) {
    let num = $( v ).find( '.lop-form-radio-sel' ).length;
    if ( num > 1 ) {
      lop_show_error( '单选框只能有一个默认选中的值' );
      return false;
    }
  } );
  // 单选框 点击选中事件
  $( '.lop-form-radio-list>.lop-form-radio-option' ).click( function () {
    radioClick( $( this ) )
  } );
  // 多选框 点击选中事件
  $( '.lop-form-check-list>.lop-form-check-option' ).click( function () {
    checkClick( $( this ) )
  } );

  // 下拉框 点击选中事件
  $( '.lop-select>.lop-select-option' ).click( function () {
    selectOption( $( this ) )
  } );

  //给表单的提交按钮绑定事件
  $( '.lop-form-sub-btn' ).on( 'click', ( e ) => lop_form_sub( e.target ) );

  //单文件上传按钮点击事件
  $( '.lop-one-file' ).change( function ( e ) {
    let imgIO = this.files[0];
    oneFileUp( $( this ), imgIO );
  } );

  //多文件上传按钮点击事件
  $( '.lop-more-file' ).change( function () {
    let imgIO = this.files[0];
    moreFileUp( $( this ), imgIO )
  } );

  //初始化所有 lop-input 属性组件
  initInputComponent();
  //初始化所有 lop-radio & lop-check & lop-sel-list 属性组件
  initSelectComponent();
  //初始化所有 lop-file 属性组件
  initFileComponent();
} );

function isNull( val, text ) {
  if ( val === undefined || val === '' ) {
    lop_show_error( text );
    return false;
  }
  return true;
}

//该方法用来，在用户 发送请求返回数据后，若用 组件化开发，调用此方法，用以加载组件&数据
function initAllComponent() {
  initInputComponent();
  initSelectComponent();
  initFileComponent();
}

//组件化开发
//初始化所有 lop-input 属性组件
function initInputComponent() {
//遍历所有 lop-input 属性的 标签，并把它转化为 input标签
  $( 'div[lop-input]' ).each( ( i, v ) => {
    let title = $( v ).attr( 'lop-title' );
    let name = $( v ).attr( 'lop-name' );

    if ( !isNull( title, '必须绑定 lop-title 属性，且必须赋值' ) ) return false;
    if ( !isNull( name, '必须绑定 lop-name 属性，且必须赋值' ) ) return false;

    let must = $( v ).attr( 'lop-must' );
    let disable = $( v ).attr( 'lop-disable' ) === undefined;
    //获取用户是否采用默认样式显示input
    let classic = $( v ).attr( 'lop-classic' ) === undefined;
    let val = $( v ).attr( 'lop-val' );
    //获取 有没有设置默认值
    val = ( val !== undefined ? val !== '' ? val : '' : '' );
    let tips = $( v ).attr( 'lop-tips' );
    //获取 tips 的值
    tips = ( tips !== undefined && tips !== '' ? tips : '请输入' + title );
    let hide = $( v ).attr( 'lop-hide' );
    let isText = $( v ).attr( 'lop-isText' ) === undefined;
    let isPwd = $( v ).attr( 'lop-isPwd' ) === undefined;
    let isDate = $( v ).attr( 'lop-date' ) === undefined;

    if ( !isText && !isPwd && !isDate ) {
      lop_show_error( '不能同时使用 lop-isText & lop-isPwd & lop-date 属性' );
      return false;
    }

    let hideHtml = '';
    if ( hide !== undefined && hide !== '' && parseInt( hide ) !== 0 ) {
      for ( let i = 0; i < parseInt( hide ); i++ ) {
        hideHtml += '字';
      }
    }

    //判断是 input 还是 textarea
    let isInput = ( isText ? '<input onfocus="inputFocus(this)" onblur="inputBlur(this)" class="lop-form-input" type="' + ( isPwd ? isDate ? 'text' : 'date' : 'password' ) + '" value="' + val + '" id="' + name + '" name="' + name + '" placeholder="'
      + tips + '"/>' :
      '<textarea onfocus="inputFocus(this)" onblur="inputBlur(this)" class="lop-form-input" id="' + name + '" name="' + name + '" placeholder="'
      + tips + '">' + val + '</textarea>' );

    $( v ).after( '<div class="lop-form-input-box' + ( isText ? '' : ' lop-form-textarea-box ' )
      + ( classic ? '' : ' lop-form-classic ' ) + ( disable ? '' : ' lop-form-disable ' ) + '">\n' +
      '    <label for="name" class="lop-form-title" ' + ( must !== undefined ? ( must !== '' ? 'lop-must="' + must + '"' : 'lop-must' ) : '' )  + '>\n' +
      ( hideHtml !== '' ? '<div class="lop-hide">' + hideHtml + '</div>' : hideHtml ) +
      '      <div class="lop-text">' + ( must !== undefined ? '<span class="lop-form-must">*</span>' : '' ) + title + '</div>\n' +
      '    </label>\n' +
      '    <div class="lop-form-input">\n' + isInput + ' </div></div>' );

    $( v ).remove();
  } );
}

//初始化所有 lop-radio & lop-check & lop-sel-list 属性组件
function initSelectComponent() {
  //遍历所有单选框 lop-radio&lop-check 组件
  $( 'div[lop-select]' ).each( ( i, v ) => {
    let radio = $( v ).attr( 'lop-radio' ) !== undefined;
    let check = $( v ).attr( 'lop-check' ) !== undefined;
    let select = $( v ).attr( 'lop-sel-list' ) !== undefined;

    if ( radio && check && select ) {
      lop_show_error( 'lop-radio & lop-check & lop-sel-list 不能同时存在' );
      return false;
    }

    let title = $( v ).attr( 'lop-title' );
    let name = $( v ).attr( 'lop-name' );

    if ( !isNull( title, '必须绑定 lop-title 属性，且必须赋值' ) ) return false;
    if ( !isNull( name, '必须绑定 lop-name 属性，且必须赋值' ) ) return false;

    let must = $( v ).attr( 'lop-must' );
    let val = $( v ).attr( 'lop-val' ).split( '|' );

    let itemLi = '';
    if ( radio ) {
      itemLi = '<ul class="lop-form-radio-list">';

      for ( let obj of val ) {
        let o = eval( '(' + obj + ')' );
        itemLi += '<li onclick="radioClick(this)" lop-val="' + o.itemVal + '" class="lop-form-radio-option ' + ( o.isCheck !== undefined ? o.isCheck ? 'lop-form-radio-sel' : '' : '' ) +
          '"><span class="lop-form-option-sel"></span><span class="lop-form-option-text">' + o.name + '</span></li>';
      }
      itemLi += '</ul>';
    } else if ( check ) {
      itemLi = '<ul class="lop-form-check-list">';

      for ( let obj of val ) {
        let o = eval( '(' + obj + ')' );
        itemLi += '<li onclick="checkClick(this)" lop-val="' + o.itemVal + '" class="lop-form-check-option ' + ( o.isCheck !== undefined ? o.isCheck ? 'lop-form-check-sel' : '' : '' ) +
          '"><span class="lop-form-option-sel"></span><span class="lop-form-option-text">' + o.name + '</span></li>';
      }
      itemLi += '</ul>';
    } else if ( select ) {

      let liContent = '';

      let titleText = '';

      for ( let obj of val ) {
        let o = eval( '(' + obj + ')' );
        liContent += '<li onclick="selectOption(this)" class="lop-select-option ' + ( o.isCheck !== undefined ? o.isCheck ? 'lop-sel-option' : '' : '' ) + '" lop-val="' + o.itemVal + '">' + o.name + '</li>';
        titleText = ( o.isCheck ? o.name : '未选择' );
      }

      itemLi = '<div class="lop-select-box">\n' +
        '        <span class="lop-sel-text">' + titleText + '</span>\n' +
        '        <div class="lop-icon-box"><i class="lop-icon iconfont icon-lop-down"></i></div>\n' +
        '        <ul class="lop-select">' + ( titleText !== '' ? '<li onclick="selectOption(this)" class="lop-select-option" lop-val="-1">未选择</li>' : '' );

      itemLi += liContent + '</ul></div>';
    }

    $( v ).after( ' <div name="' + name + '" class="' + ( select ? 'lop-form-select-list' : 'lop-form-select-box' ) + '">\n' +
      '    <label class="lop-form-title" ' + ( must !== undefined ? ( must !== '' ? 'lop-must="' + must + '"' : 'lop-must' ) : '' ) + '>\n' +
      '      <div class="lop-form-text"><div class="lop-text">' + ( must !== undefined ? '<span class="lop-form-must">*</span>' : '' ) + title + '</div></div>\n' + itemLi +
      '    </label>\n' +
      '  </div>' );

    $( v ).remove();
  } );

}

//初始化所有 lop-file 属性组件
function initFileComponent() {
  $( 'div[lop-file]' ).each( ( i, v ) => {
    let title = $( v ).attr( 'lop-title' );
    let name = $( v ).attr( 'lop-name' );
    let num = parseInt( $( v ).attr( 'lop-num' ) );

    if ( !isNull( title, '必须绑定 lop-title 属性，且必须赋值' ) ) return false;
    if ( !isNull( name, '必须绑定 lop-name 属性，且必须赋值' ) ) return false;

    let isMore = $( v ).attr( 'lop-more-file' ) !== undefined;

    let must = $( v ).attr( 'lop-must' );
    let val = $( v ).attr( 'lop-val' );
    //获取 有没有设置默认值
    val = ( val !== undefined ? val !== '' ? val : '' : '' );

    let htmlCon = '';

    if ( isMore ) {

      if ( num === undefined || num <= 1 ) {
        lop_show_error( 'lop-num 必须的值 >1 ' );
        return false;
      }

      let url = val.split( ' ' );
      for ( let arg of url ) {
        htmlCon += '<div class="lop-form-img-box">\n' +
          '        <img src="' + arg + '">\n' +
          '        <div onclick="delImgMore(this)" lop-name="' + name + "/" + arg.substring( arg.lastIndexOf( '/' ) + 1 ) + '" class="lop-form-img-del"><i class="iconfont icon-lop-del"></i></div>\n' +
          '      </div>';
        moreFile.append( name + "/" + arg.substring( arg.lastIndexOf( '/' ) + 1 ), arg );
      }
    } else {
      htmlCon = '<div class="lop-form-img-box">\n' +
        '        <img src="' + val + '">\n' +
        '        <div onclick="delImgOne(this)" lop-name="' + name + '" class="lop-form-img-del"><i class="iconfont icon-lop-del"></i></div>\n' +
        '      </div>';
      oneFile.append( name, val );
    }

    $( v ).after(
      '<div class="lop-form-file-box ' + ( isMore ? 'lop-files' : '' ) + '">\n' +
      '    <div class="lop-form-title" ' + ( must !== undefined ? must !== '' ? "lop-must=" + must : 'lop-must' : '' ) + '>\n' +
      '      <div class="lop-form-file-btn">\n' +
      '        <span class="lop-form-text"><span class="lop-text">' + ( must !== undefined ? '<span class="lop-form-must">*</span>' : '' ) + title + '</span></span>\n' +
      '        <input onchange="' + ( isMore ? 'moreFileUp(this, this.files[0])' : 'oneFileUp(this, this.files[0])' ) + '" class="lop-form-file ' + ( isMore ? 'lop-more-file' : 'lop-one-file' ) + '" title="" type="file" name="' + name + '" accept="image/jpeg, image/png, image/jpg">\n' +
      '      </div>\n' + ( isMore ? '<div class="lop-form-max-num" lop-num="' + num + '">注：最高可上传 ' + num + ' 张图片</div>' : '' ) +
      '      <div class="lop-form-file-look">\n' +
      ( htmlCon !== '' ? htmlCon : ( isMore ? '' : '<i class="lop-icon iconfont icon-lop-img"></i>' ) ) +
      '      </div>\n' +
      '    </div>' +
      '</div>' );

    $( v ).remove();
  } );
}

/* 数据表格 */
//请求地址
let url = '';
//请求类型
let type = 'POST';
//当前第几页
let current = 1;
//每页显示的条数
let size = 10;
//总条数
let total = 0;
//总页数
let pages = 0;
//总页数
let theadList = {};
//用户的查询条件
let conditions = {};

//初始化数据
function initTableVal( obj ) {
  ( {
    url,
    type = 'POST',
    conditions = {},
    theadList = {},
    currentPage: current = 1,
    onePageNum: size = 10,
    border = 'row',
    align = 'center'
  } = obj );

  let html = '';

  let conditionsNum = Object.keys( conditions ).length;

  if ( conditionsNum !== 0 ) {
    conditionsNum++;
    html += '<div class="lop-common-table-conditions-box"><div class="lop-form-box-loc  lop-form-box-row'
      + ( conditionsNum > 1 && conditionsNum <= 6 ? conditionsNum : '6' ) + '">';
    for ( let key of Object.keys( conditions ) ) {
      let [title, tips, type = 'text', val = ''] = conditions[key];
      if ( type === '' || type === 'text' || type === 'date' )
        html += '<div lop-input ' + ( type === 'date' ? 'lop-date' : '' ) + '  lop-title="' + title + '" lop-name="' + key + '" lop-tips="' + tips + '" lop-val="' + val + '"></div>';
      else if ( type === 'select-one' )
        html += '<div lop-select lop-sel-list lop-title="' + title + '" lop-name="' + key + '" lop-val="' + val + '"></div>';
    }
    html += '<div onclick="initTableTbodyData()" class="lop-form-sub-table-btn">查 询</div></div></div>';
  }

  html += '<table rules="none" class="lop-common-table '
    + ( align === 'left' ? ' lop-common-table-left ' : '' )
    + ( border === 'row' ? ' lop-common-table-border-row ' : border === 'clo' ? ' lop-common-table-border-clo ' : ' lop-common-table-border-all ' )
    + '"><thead class="lop-common-thead"><tr class="lop-common-thead-row">';

  let th = '';
  //遍历获取所有 th 并赋值
  for ( let item of Object.keys( theadList ) ) {
    if ( item !== 'btn' )
      th += '<th class="lop-common-item lop-common-thead-item">' + theadList[item][0] + '</th>';
    else if ( item === 'btn' )
      th += '<th class="lop-common-item lop-common-thead-item">操作</th>';
  }
  html += th + '</tr></thead><tbody class="lop-common-tbody"></tbody></table>';

  $( '.lop-common-table-box' ).html( html );

  //初始化所有 组件
  initAllComponent();

  //初始化 tbody 的数据
  initTableTbodyData();
}

//初始化表格的 tbody 和 底部翻页按钮
function initTableTbodyData() {
  let data = { currentPage: current, onePageNum: size };
  //获取用户的查询条件
  data = getTableCondition( data );

  let tbody = '';
  new Promise( ( resolve, reject ) => {
    lop_ajax( url, type, data, function ( res ) {
      total = res.data.total;
      pages = res.data.pages;
      for ( let obj of res.data.records ) {
        tbody += '<tr class="lop-common-tbody-row">';
        for ( let item of Object.keys( theadList ) ) {
          let [text = '#', type = 'String', fText = '', tText = ''] = theadList[item];
          if ( type === 'Number' || type === 'String' )
            tbody += '<td class="lop-common-item lop-common-tbody-item">' + obj[item] + '</td>';
          else if ( type === 'Boolean' )
            tbody += '<td class="lop-common-item lop-common-tbody-item">' + ( obj[item] ? tText : fText ) + '</td>';
          else if ( type === 'image' ) {
            tbody += '<td class="lop-common-item lop-common-tbody-item"><img class="lop-common-item-img" src="' + obj[item] + '" /></td>';
          } else {
            if ( item === 'btn' ) {
              tbody += '<td class="lop-common-item lop-common-tbody-item"><div class="lop-common-item-btn-box">';
              if ( text === 'edit' || type === 'edit' || fText === 'edit' )
                tbody += '<div class="lop-common-item-btn lop-form-btn-edit">编辑</div>';
              if ( text === 'show' || type === 'show' || fText === 'show' )
                tbody += '<div class="lop-common-item-btn lop-form-btn-show">查看</div>';
              if ( text === 'del' || type === 'del' || fText === 'del' )
                tbody += '<div class="lop-common-item-btn lop-form-btn-del">删除</div>';
              tbody += '</div></td>';
            }
          }

        }
        tbody += '</tr>';
      }
      $( '.lop-common-tbody' ).html( tbody );
      resolve( res );
    } );
  } ).then( ( res ) => {

    if ( $( '.lop-common-table-box' ).find( '.lop-common-table-page-box' ).length !== 0 )
      return false;

    //添加底部选择框的标签
    let selBtn = '<div class="lop-common-table-page-box"><div class="lop-common-table-page-list"><div onclick="loadPrev()" class="lop-common-table-page-btn-up">上一页</div><ul class="lop-common-table-page-btn">';

    //若总页数小于等于 5
    if ( pages <= 5 ) {
      for ( let i = 1; i <= pages; i++ ) {
        selBtn += '<li onclick="btnLoading(this)" class="lop-common-table-page-item ' + ( current === i ? 'lop-common-table-page-item-sel' : '' ) + '">' + i + '</li>';
      }
    } else if ( pages > 5 ) {
      if ( current < 4 ) {
        for ( let i = 1; i <= 4; i++ ) {
          if ( i === 1 )
            selBtn += '<li onclick="btnLoading(this)" class="lop-common-table-page-item ' + ( current === i ? 'lop-common-table-page-item-sel' : '' ) + '">' + i + '</li><li class="lop-common-table-page-more lop-hide-none">···</li>';
          else
            selBtn += '<li onclick="btnLoading(this)" class="lop-common-table-page-item ' + ( current === i ? 'lop-common-table-page-item-sel' : '' ) + '">' + i + '</li>';
        }
        selBtn += '<li class="lop-common-table-page-more">···</li><li onclick="btnLoading(this)" class="lop-common-table-page-item">' + pages + '</li>';
      } else if ( current >= 4 && current <= pages - 3 ) {
        selBtn += '<li onclick="btnLoading(this)" class="lop-common-table-page-item">1</li><li class="lop-common-table-page-more">···</li>';
        for ( let i = ( current - 1 ); i <= ( current + 1 ); i++ ) {
          selBtn += '<li onclick="btnLoading(this)" class="lop-common-table-page-item ' + ( current === i ? 'lop-common-table-page-item-sel' : '' ) + '">' + i + '</li>';
        }
        selBtn += '<li class="lop-common-table-page-more">···</li><li onclick="btnLoading(this)" class="lop-common-table-page-item">' + pages + '</li>';
      } else if ( current > pages - 3 ) {
        selBtn += '<li onclick="btnLoading(this)" class="lop-common-table-page-item">1</li><li class="lop-common-table-page-more">···</li>';
        for ( let i = ( pages - 3 ); i <= pages; i++ ) {
          if ( i === pages )
            selBtn += '<li class="lop-common-table-page-more lop-hide-none">···</li><li onclick="btnLoading(this)" class="lop-common-table-page-item ' + ( current === i ? 'lop-common-table-page-item-sel' : '' ) + '">' + i + '</li>';
          else
            selBtn += '<li onclick="btnLoading(this)" class="lop-common-table-page-item ' + ( current === i ? 'lop-common-table-page-item-sel' : '' ) + '">' + i + '</li>';
        }
      }
    }

    selBtn += '</ul><div onclick="loadNext()" class="lop-common-table-page-btn-down">下一页</div></div>' +
      ' <div class="lop-common-table-fun-box">\n' +
      '      <div class="lop-common-table-total">共<span class="lop-common-table-total-num">' + ( total >= 10000 ? ( total / 1000 ).toFixed( 1 ) + '万' : total ) + '</span>条</div>\n' +
      '    </div></div></div>';
    $( '.lop-common-table-box' ).append( selBtn );
  } );
}

//获取 table 查询数据的条件
function getTableCondition( data ) {
  let formCondition = $( '.lop-common-table-box>.lop-common-table-conditions-box>.lop-form-box-loc' );

  for ( let key of Object.keys( conditions ) ) {
    let val;
    if ( conditions[key][2] === 'select-one' ) {
      $( '.lop-common-table-conditions-box>.lop-form-box-loc>.lop-form-select-list' ).each( ( i, v ) => {
        val = getSelectOptionVal( $( v ) );
        if ( val !== undefined && val !== '' && val !== '-1' )
          data[$( v ).attr( 'name' )] = val;
      } );
    } else {
      $( '.lop-common-table-conditions-box>.lop-form-box-loc' ).find( '.lop-form-input' ).each( ( i, v ) => {
        val = $( v ).val();
        if ( val !== undefined && val !== '' && val !== -1 )
          data[$( v ).attr( 'name' )] = val;
      } );
    }
  }

  return data;
}

//table 上一页按钮
function loadPrev() {
  if ( current === 1 ) {
    lop_show_warn( '已经是第一页了' );
    return false;
  }
  current--;
  tableSwitchBtn( false );
}

//table 下一页按钮
function loadNext() {
  if ( current === pages ) {
    lop_show_warn( '已经是第最后一页了' );
    return false;
  }
  current++;
  tableSwitchBtn( true );
}

//table 按钮列表点击
function btnLoading( obj ) {
  let clickNum = parseInt( $( obj ).text() );
  if ( clickNum === current )
    return false;

  let flag = current < clickNum;

  current = clickNum;

  tableSwitchBtn( flag );
}

//table 按钮点击切换样式
function tableSwitchBtn( isAdd ) {
  if ( pages > 5 ) {
    if ( current <= 3 ) {
      $( '.lop-common-table-page-btn>.lop-common-table-page-item:first-child' ).next( '.lop-common-table-page-more' ).addClass( 'lop-hide-none' );
      $( '.lop-common-table-page-btn>.lop-common-table-page-item:last-child' ).prev( '.lop-common-table-page-more' ).removeClass( 'lop-hide-none' );
      $( '.lop-common-table-page-btn>.lop-common-table-page-item' ).each( ( i, v ) => {
        let num = parseInt( $( v ).text() );

        //若用户直接点击第 1 页
        if ( current === 1 ) {
          if ( num !== 1 && num !== pages )
            $( v ).text( current + i );
        }
        //若用户直接点击上一页按钮，点到了第三页，则进行一次 数字--
        if ( current === 3 ) {
          if ( num !== 1 && num !== pages && !isAdd )
            $( v ).text( --num );
        }

        if ( current === num )
          $( v ).addClass( 'lop-common-table-page-item-sel' ).siblings( '.lop-common-table-page-item' ).removeClass( 'lop-common-table-page-item-sel' );
      } );
    } else if ( current > 3 && current <= pages - 3 ) {
      $( '.lop-common-table-page-btn>.lop-common-table-page-item:first-child' ).next( '.lop-common-table-page-more' ).removeClass( 'lop-hide-none' );
      $( '.lop-common-table-page-btn>.lop-common-table-page-item:last-child' ).prev( '.lop-common-table-page-more' ).removeClass( 'lop-hide-none' );

      $( '.lop-common-table-page-item' ).each( ( i, v ) => {
        let num = parseInt( $( v ).text() );
        if ( num !== 1 && num !== pages )
          $( v ).text( ( isAdd ? ++num : --num ) );
        if ( current === num )
          $( v ).addClass( 'lop-common-table-page-item-sel' ).siblings( '.lop-common-table-page-item' ).removeClass( 'lop-common-table-page-item-sel' );
      } );
    } else if ( current > pages - 3 ) {
      $( '.lop-common-table-page-btn>.lop-common-table-page-item:first-child' ).next( '.lop-common-table-page-more' ).removeClass( 'lop-hide-none' );
      $( '.lop-common-table-page-btn>.lop-common-table-page-item:last-child' ).prev( '.lop-common-table-page-more' ).addClass( 'lop-hide-none' );

      $( '.lop-common-table-page-btn>.lop-common-table-page-item' ).each( ( i, v ) => {
        let num = parseInt( $( v ).text() );

        //若用户直接点击第 最后一页
        if ( current === pages ) {
          if ( num !== 1 && num !== pages )
            $( v ).text( pages - 4 + i );
        }

        //若用户直接点击下一页按钮，点到了倒数第三页，则进行一次 数字++
        if ( current === pages - 2 ) {
          if ( num !== 1 && num !== pages && isAdd )
            $( v ).text( ++num );
        }

        if ( current === num )
          $( v ).addClass( 'lop-common-table-page-item-sel' ).siblings( '.lop-common-table-page-item' ).removeClass( 'lop-common-table-page-item-sel' );
      } );
    }
  } else if ( pages <= 5 ) {
    $( '.lop-common-table-page-item' ).each( ( i, v ) => {
      let num = parseInt( $( v ).text() );
      if ( current === num )
        $( v ).addClass( 'lop-common-table-page-item-sel' ).siblings( '.lop-common-table-page-item' ).removeClass( 'lop-common-table-page-item-sel' );
    } );
  }
  initTableTbodyData( theadList );
}